﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>表单数据/审阅管理</title>
    <script src="../Scripts/jquery-1.11.0.min.js" type="text/javascript"></script>
    <!--表单样式-->
    <link href="../Admin/CSS/FoolFrmBody.css" rel="stylesheet" />
    <!-- layui -->
    <link href="../Scripts/layui/layui/css/layui.css" rel="stylesheet" />
    <link href="../Scripts/layui/style/admin.css" rel="stylesheet" />
    <script src="../Scripts/layui/layui/layui.js" type="text/javascript"></script>
    <!--通用的JS-->
    <script src="../Scripts/config.js" type="text/javascript"></script>
    <script src="../Comm/Gener.js" type="text/javascript"></script>
    <script src="../Scripts/QueryString.js" type="text/javascript"></script>
    <script src="../Comm/JScript.js" type="text/javascript"></script>
    <script src="../Scripts/layui/LayuiDialog.js"></script>
    <script src="../Scripts/vue.js" type="text/javascript"></script>
 
</head>
<body>
    <div id="App" style="background-color:white">
        <template v-if="fieldType==0">
            <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">

                <ul class="layui-tab-title">
                    <li class="layui-this" id="Tab1">数据审阅</li>
                    <li id="Tab2">数据版本</li>
                </ul>
                <div class="layui-tab-content">
                    <div class="layui-tab-item layui-show" id="Tab1_Mark">
                        <div v-if="isEnable==1">
                            <div class='layui-card' style='border-radius:10px' id='FrmDBRemark_Div'>
                                <div class="layui-card-body">
                                    <textarea id='FrmDBRemark_Doc' style='outline:none;transition:1s;border:1px solid #DDDDDD;box-shadow;2px 2px 4px #f5f5f5 inset;padding:10px' placeholder='请输入内容' class='layui-textarea'></textarea>
                                    <div style="text-align:right">
                                        <button type='button' class='layui-btn layui-btn-sm' style='width:80px' @click='FrmDBRemark_Save()'>保存</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <ul class="layui-timeline" id="layuiRemarkID" style="padding:20px">
                            <template v-if="dbreamrks.length>0">
                                <template v-for="(item,index) in dbreamrks">
                                    <li class="layui-timeline-item" style="padding-left: 22px">
                                        <i class="layui-icon layui-timeline-axis" style="top: 3px;">&#xe63f;</i>
                                        {{item.RDT}}
                                        <!--<div class="layui-timeline-content layui-text" style="box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);">-->
                                        <h3 class="layui-timeline-title" style="color:#666;margin-top:15px;">批阅人:{{item.RecName}}</h3>
                                        <p>
                                            批阅信息:{{item.Remark}}
                                            <div v-if="isEnable==1 && item.RecNo==webuser.No" style="text-align:right">
                                                <button type='button' style='margin:5px' class='layui-btn  layui-btn-sm' @click='FrmDBRemark_Delete(item,index)'><i class='layui-icon'>&#xe640;</i></button>
                                            </div>
                                        </p>
                                        <!--</div>-->
                                    </li>
                                </template>
                            </template>

                            <template v-else>
                                <li class="layui-timeline-item" style="padding-left: 22px">
                                    <i class="layui-icon layui-timeline-axis" style="top: 3px;">&#xe63f;</i>
                                    暂无批阅信息
                                </li>
                            </template>
                        </ul>
                    </div>
                    <div class="layui-tab-item" id="Tab2_Ver">
                        <ul class="layui-timeline" id="layuiRemarkID" style="padding:20px">
                            <template v-if="dbvers.length>0">
                                <template v-for="(item,index) in dbvers">
                                    <li class="layui-timeline-item" style="padding-left: 22px">
                                        <i class="layui-icon layui-timeline-axis" style="top: 3px;">&#xe63f;</i>
                                        {{item.RDT}}
                                        <h3 class="layui-timeline-title" style="color: #666; margin-top: 15px;">处理人:{{item.RecName}}</h3>
                                        <p>原始值:<span v-html="item.TrackID"></span></p>

                                    </li>
                                </template>
                            </template>
                            <template v-else>
                                <li class="layui-timeline-item" style="padding-left: 22px">
                                    <i class="layui-icon layui-timeline-axis" style="top: 3px;">&#xe63f;</i>
                                    暂无数据版本信息
                                </li>
                            </template>
                        </ul>
                    </div>
                </div>
            </div>
        </template>
        <template v-else>
          <!--从表的信息展示-->
            <template v-if="dbvers.length>0">
                <template v-for="(item,index) in dbvers">
                    <li class="layui-timeline-item" style="padding-left: 22px">
                        <i class="layui-icon layui-timeline-axis" style="top: 3px;">&#xe63f;</i>
                        {{item.RDT}}
                        <h3 class="layui-timeline-title" style="color: #666; margin-top: 15px;">处理人:{{item.RecName}}</h3>

                        <table class="layui-hide" :id="item.TableID" :lay-filter="item.TableID"></table>
                    </li>
                </template>
            </template>
            <template v-else>
                <li class="layui-timeline-item" style="padding-left: 22px">
                    <i class="layui-icon layui-timeline-axis" style="top: 3px;">&#xe63f;</i>
                    暂无数据版本信息
                </li>
            </template>
        </template>
    </div>
    <script type="text/javascript">
        var Baseinfo = new Vue({
            el: '#App',
            data: {
                field: "", //传过来的字段、从表
                fieldType: 0, //字段类型，
                frmID: "", //
                rFrmID: "",
                refPKVal: "",
                pageType:1,
                webuser: "",
                isEnable: true,
                dbreamrks: [], //审阅数据
                dbvers: [], //版本数据
                mapAttrs: [],
                mapDtl: {}
            },
            methods: {
                InitData: function () {
                   
                    var handler = new HttpHandler("BP.WF.HttpHandler.WF_CCForm");
                    handler.AddPara("FrmID", this.frmID);
                    handler.AddPara("RFrmID", this.rFrmID);
                    handler.AddPara("RefPKVal", this.refPKVal);
                    handler.AddPara("Field", this.field);
                    handler.AddPara("FieldType", this.fieldType);
                    var data = handler.DoMethodReturnString("FrmDBVerAndRemark_Init");
                    if (data.indexOf("err@") != -1) {
                        layer.alert(data);
                        return;
                    }
                    data = JSON.parse(data);
                    this.dbreamrks = data.Sys_FrmDBRemark;
                    if (this.dbreamrks != undefined)
                        this.dbreamrks.reverse();
                    this.dbvers = data.Sys_FrmDBVer;
                    if (this.dbvers != null)
                        this.dbvers.reverse();
                    //从表数据展示
                    if (this.fieldType == 1) {
                        this.mapAttrs = data.Sys_MapAttr;
                        this.mapDtl = data.Sys_MapDtl[0];
                        $.each(this.dbvers, function (i, dbVer) {
                            dbVer.TableID = "table_" + i;
                        })
                        
                    }

                },
                DtlShow: function () {

                    //解析col的展示
                    var cols = [];
                    this.mapAttrs.forEach(attr => {
                        if (attr.UIVisible == 1) {
                            cols.push({
                                field: attr.KeyOfEn,
                                title: attr.Name,
                                fixed: false,
                                minWidth: attr.Width,
                                sort: false,
                            })
                        }
                    });
                    var ptable = this.mapDtl.PTable;
                    $.each(this.dbvers, function (i, dbver) {
                        var json = dbver.TrackID;
                        var data = [];
                        if (json == null || json == undefined || json == "")
                            data = []
                        else {
                            json = JSON.parse(json);
                            data = json[ptable];
                        }
                        layui.table.render({
                            elem: '#'+dbver.TableID,
                            id: dbver.TableID,
                            data: data,
                            title: '数据表',
                            limit: Number.MAX_VALUE,
                            
                            cols:[cols],
                            page: false
                        });
                    })
                },
                FrmDBRemark_Save: function () {
                    var remark = $("#FrmDBRemark_Doc").val();
                    if (remark == "") {
                        layer.alert("审阅信息不能为空");
                        return;

                    }
                    var en = new Entity("BP.Sys.FrmDBRemark");
                    en.FrmID = this.rFrmID; //表单ID.
                    en.Field = this.field; //字段。
                    en.Remark = remark; //批阅意见.
                    en.RefPKVal = this.refPKVal; //主键字段.
                    en.Insert(); //插入数据.
                    this.dbreamrks.unshift(en);
                    $("#FrmDBRemark_Doc").val("");


                },
                FrmDBRemark_Delete: function (item, index) {
                    var en = new Entity("BP.Sys.FrmDBRemark", item.MyPK);
                    en.Delete();
                    this.dbreamrks.splice(index, 1);

                },
            },
            created() {
                this.field = GetQueryString("Field");
                this.fieldType = GetQueryString("FieldType");
                this.frmID = GetQueryString("FrmID");
                this.rFrmID = GetQueryString("RFrmID");
                this.isEnable = GetQueryString("IsEnable");
                this.refPKVal = GetQueryString("RefPKVal");
                this.pageType = GetQueryString("PageType");

                //根据用户的信息，判断是否启用那个设置工具。
                this.webuser = new WebUser();
                this.InitData();
               

            },
            mounted() {
                if (this.fieldType == 1) {
                    this.DtlShow();
                }
               
               
                if (this.pageType == "0") {
                    $("#Tab1").removeClass("layui-this");
                    $("#Tab1_Mark").removeClass("layui-show");
                    $("#Tab2").addClass("layui-this");
                    $("#Tab2_Ver").addClass("layui-show");
                }
            }
        });
    </script>
</body>
</html>